﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>MUI Samples</title>

    <script src="../core/mui-core.js" type="text/javascript"></script>
    <link href="../common/samples.css" rel="stylesheet" type="text/css" />
	<script>
		Mui.ready(function(){
			Mui.regist('common',{
				path:'common',
				requires:'Mui.util.Viewport,Mui.util.Tab,Mui.util.AjaxTree,Mui.util.Window,Mui.util.Menu'
			});
			Mui.use('common',function(Mui){
				var v=new Mui.util.MainView({
					title:'Mui Samples',
					createPanel:function(title,url){
						var p=new Mui.util.Panel({
							hasColl:true,
							title:title,
							type:'url',
							hasFoot:false,
							scope:this,
							style:'border:none;',
							hasTopbar:true,
							url:'blank.html',
							jsRsc:title.toLowerCase()+'.js',
							scope:this,
							hasTopbar:true,
							autoRender:false,
							reload:function(){
								Mui.ajax.getText(this.jsRsc+'?_r'+(new Date()),function(text){
									this.setCode(text);
									this.review();
								},this);
							},
							review:function(data){
								var code=this.getCode();
								
								var html=[];
								var doc=this.getDoc();
								var s=doc.createElement('script');
								s.type="text/javascript";
								code='try{\n'+code+'\n}catch(e){console.log(e);}';
								s.text=code;
								doc.body.innerHTML='';
								doc.body.appendChild(s);
							},
							setCode:function(code){
								this.createCodeWin();
								this.codeWin.setCode(code);
							},
							getCode:function(){
								return this.codeWin.getCode();
							},
							getDoc:function(){
								return this.getIframeEl()[0].contentWindow.document;
							},
							getWin:function(){
								return this.getIframeEl()[0].contentWindow;
							},
							showCodeWin:function(){
								this.createCodeWin();
								this.codeWin.show();
							},
							createCodeWin:function(){
								if(!this.codeWin){
									var cw=new Mui.util.Window({
										title:'Source Code',
										width:600,
										height:400,
										scope:this,
										hasMax:false,
										hasFoot:true,
										setCode:function(text){
											this.get('_source').val(text);
										},
										getCode:function(){
											return this.get('_source').val();
										},
										getContent:function(){
											var html=[];
											html.push('<div class="tips" id="'+this.id+'_tips">下面的代码的运行效果在右边预览，您可以只有修改下面的代码</div>');
											
											html.push('<textarea class="code" id="'+this.id+'_source"></textarea>');
											
											return html.join('');
										},
										createFootBtns:function(){
											return [{
												text:'预览',
												handler:function(){
													this.scope.review();
													this.hide();
												},
												scope:this
											},{
												text:'取消',
												handler:this.hide
											}]
										}
									});
									var bel=cw.getBodyEl();
									var _h=bel.height()-cw.get('_tips').fullHeight();
									var _w=bel.width();
									
									
									cw.get('_source').css({
										height:_h-2,
										width:_w-2
									});
									this.codeWin=cw;
								}
							},
							createTopbar:function(){
								return [{
									text:'重新预览',
									handler:this.review
								},{
									text:'重新加载',
									handler:this.reload
								},{
									text:'修改代码',
									handler:this.showCodeWin
								}]
							},
							initEvent:function(){
								var _this=this;
								this.getIframeEl().unbind('load').bind('load',function(){
									_this.reload();
								});
							}
						});
						return p;
					}
					
				});
				
				
				$('#skin_blue').click(function(){
					Mui.loader.css('../skins/default/mui-all.css');
				});
				
				$('#skin_orange').click(function(){
					Mui.loader.css('../skins/taobao/mui-all.css');
				});
			});
			
			//l.close();//Mui.tip.loading();
		});
	</script>
</head>
<body>
<img src="../css/loading.gif" class="loading"/>
<div style="display:none;">
<div id="top">
    <h3>MUI Samples</h3>
	<a href="../docs/">API</a>
	<a href="#" id="skin_orange">橙色皮肤</a>
	<a href="#" id="skin_blue">蓝色经典</a>
</div>
<div id="left">
</div>
<div id="foot">
    <span>Copyrights &copy; Mammoo.Net</span>
</div>
</div>
</body>
</html>
